<template>
  <!--单船研究数据-->
  <div class="innerBox">
    <div class="search">
      <SearchForm
        ref="searchFormRef"
        :formInputs="state.formInputs"
        @submit="search"
      />
    </div>
    <div class="tables">
      <Page :repair="state.repair" :type="1" />
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, onMounted } from "vue";
import _ from "lodash";
import SearchForm from "@/components/SearchForm.vue";
import Page from "../ShipEmissionReport/index.vue";

const { proxy } = getCurrentInstance();

const state = reactive({
  list: [],
  formInputs: [
    {
      label: "船舶",
      type: "select",
      name: "repairId",
      options: [],
    },
  ],
  repair: null,
});
const searchFormRef = ref();

const search = ({ repairId }) => {
  const one = _.find(state.list, { repairId });
  state.repair = {
    repairId: one.repairId,
    shipId: one.shipId,
    shipName: one.shipName,
  };
};

const getDict = async () => {
  const { success, data } = await proxy.$axios.get("/ship_repair/dict");
  if (success) {
    state.list = data;

    const one = state.formInputs[0];
    one.options = _.map(data, (o) => ({
      label: o.shipName,
      value: o.repairId,
    }));

    const firstRepairId = data[0].repairId;
    searchFormRef.value.changeFieldValue("repairId", firstRepairId);
    search({ repairId: firstRepairId });
  }
};

onMounted(() => {
  // 获取所有订单船舶
  getDict();
});
</script>

<style lang="less" scoped>
.innerBox {
  width: 100%;
  height: 100%;

  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .tables {
    height: calc(100% - 37px);
    overflow-y: auto;
    background-color: #181818;
    padding: 2px;
    display: flex;
    flex-direction: column;
  }
}
</style>
